<template>
<div>
  <div :class="styles['info']" style="position: relative; height: 72px; line-height: 6px; padding: 0 32px;display: flex;justify-content: space-between;align-items: flex-start;">
    <div style="display: flex;justify-content: center;align-items: center;">
      <canvas style="width: 160px;height: 52px;margin-right: 12px" ref="barCodeRef"></canvas>
      <div>
        <p>{{ state.orderNo }}</p>
        <p>{{ orderTypeMap[state.orderType] }}</p>
      </div>
    </div>
    <div>
      <p><span>物流公司：</span>{{ state.logisticsCompany }}</p>
      <p><span>物流单号：</span>{{ state.trackingNumber }}</p>
      <p><span>签收时间：</span>{{ state.signTime }}</p>
    </div>
    <p :class="styles['type']" style="position: absolute;left: 40px;bottom: 0;transform: translateY(135%)">入库订单类型：{{ matchResultMap[state.matchResult] }}</p>
  </div>
  <div :class="styles['info']" style="display: flex;padding: 12px 24px;line-height: 6px;">
    <div v-for="item in infoList" :key="item.prop" style="margin-right: 52px">
        <p v-for="pItem in item" :key="pItem.prop">
          {{ pItem.label }}: {{ state[pItem.prop] || '-' }}
        </p>
    </div>
  </div>
</div>
</template>

<script setup name="PrintCardOrderInfo">
import {computed, onMounted, ref} from 'vue'
import {matchResultMap, orderTypeMap} from '@/common/statusMap'
import JsBarcode from 'jsbarcode'

const props = defineProps({
  state: {
    type: Object,
    required: true
  },
  infoProps: {
    type: Array,
    required: true
  }
})

const infosMap = new Map([
  // 总量
  ['totalAmount', [
    { label: '送拍总量', prop: 'auctionTotal' },
    { label: '实收总量', prop: 'collectTotal' }
  ]],
  // 初审卡牌
  ['firstReviewResult', [
    { label: '初审通过卡牌', prop: 'firstReviewPass' },
    { label: '初审不通过卡牌', prop: 'firstReviewMiss' }
  ]],
  // 初审人
  ['firstReviewInfo', [
    { label: '初审人员', prop: 'auditName' },
    { label: '初审时间', prop: 'auditTime' }
  ]],
  // 复核卡牌
  ['reviewResult', [
    { label: '复核通过卡牌', prop: 'reviewPassAmount' },
    { label: '复核不通过卡牌', prop: 'reviewNotPassAmount' }
  ]],
  // 复核人
  ['reviewInfo', [
    { label: '复核人员', prop: 'reviewName' },
    { label: '复核时间', prop: 'reviewTime' }
  ]]
])

const infoList = computed(() => {
  return props.infoProps.map(prop => infosMap.get(prop))
})

const barCodeRef = ref(null)

onMounted(() => {
  JsBarcode(barCodeRef.value, props.state.orderNo, {
    width: 160,
    height: 52,
    displayValue: false
  })
})

</script>

<style lang="less" src="./index.less" module="styles"></style>
